<template>
  <el-dialog :title="title" :visible.sync="open" width="600px">
    <el-form :model="formData" size="small">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,index) in chartSettings.labelMap" :key="index">
          <template v-if="item !== '日期'">
            <el-form-item>
              <el-checkbox v-model="formData[index]">{{item}}</el-checkbox>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
      <el-row v-if="radioList">
        <div class="name">{{radioName}}</div>
        <el-form-item>
          <el-radio-group v-model="chartData.radioId">
            <el-radio
              :label="item.label"
              v-for="(item,index) in radioList"
              :key="index"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title:{
      type:String
    },
    chartData: {
      type: Object
    },
    chartSettings: {
      type: Object
    },
    radioList: {
      type: Array
    },
    radioName:{
      type:String
    }
  },
  data() {
    return {
      open: false,
      formData: {}
    };
  },
  methods: {
    show() {
      this.open = true;
      let formData = {};
      this.chartData.columns.forEach((item, index) => {
        formData[item] = true;
      });
      this.formData = formData;
    },
    submitForm() {
      const columns = [],
        rows = [];
      for (let i in this.formData) {
        if (this.formData[i]) {
          columns.push(i);
        } 
      }
      if (columns.length <= 1) {
        this.$message.warning("最少选一项");
        return;
      }
      this.chartData.columns = columns;
      this.open = false;
      if (this.chartData.radioList) {
        this.chartData.rows.forEach(item => {
          this.chartData.radioList.forEach((el, index) => {
            item[el] = item[el + "List"][this.chartData.radioId];
          });
          rows.push(item);
        });
        this.chartData.rows = rows;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  display: inline-block;
  margin-bottom: 0;
}
.name {
  margin: 15px 0 10px 0;
  font-size: 16px;
  color: #333333;
}
</style>